<template>
	<view>
		<view>
			<tui-searchbar
			 backgroundColor="#A4B8AD" 
			 height="30px"
			  radius="15px"
			   padding="0px 10px 5px 10px"
			   placeholder="搜索"  
			   searchColor="#fff"
			   :cancel="false"
			   :value="searchVal"
			   @search="searchArticle"
			   @clear="cancel"></tui-searchbar>
		</view>
		<view class="history" v-if="!showArticle">
			<view class="his-tag">
				<text>历史记录</text>
				<tui-icon :size="20" name="close" @click="clearTags"></tui-icon>
			</view>
			<view class="tags-info">
				<tui-tag 
				v-for="(item, index) in hisTags"
				:key="index"
				type="gray"
				@click="tagSearch(item)"
				 shape="circle">{{item}}</tui-tag>
			</view>
		</view>
		<view class="history" v-if="!showArticle">
			<view class="his-tag">
				<text>热门搜索🔥</text>
			</view>
		</view>
		<view class="article" v-if="showArticle">
			<Article :data="articleData"></Article>
		</view>
		<view v-if="showArticle && articleData.length == 0">
			<tui-no-data imgUrl="/static/img/img_nodata.png">暂无数据</tui-no-data>
		</view>
	
	</view>
	
</template>

<script>
import Article from '../article/article.vue'
export default {
	components: {
		Article
	},
	data(){
		return {
			searchVal: null,
			hisTags: [],
			searchForm: {
				value: '',
				pageNumber: 1, // 当前页数
			    pageSize: 6, // 页面大小
			},
			articleData: [],
			pages: 0,
			showArticle: false,
		}
	},
	onLoad(){
		this.hisTags = uni.getStorageSync("his_tags") || [];
	},
	onPullDownRefresh() {
		let _this = this;
		_this.searchForm.pageNumber = 1;
		_this.getList(_this.searchForm).then(res => {
			_this.articleData = res.records;
			_this.pages = res.pages;
			uni.stopPullDownRefresh();
		})
	},
	onReachBottom() {
		let _this = this;
		_this.searchForm.pageNumber++;
		if (_this.searchForm.pageNumber> _this.pages) {
			uni.hideNavigationBarLoading();
			uni.showToast({
				title: '暂无更多数据',
				icon: 'none'	
			})
		} else {
			_this.getList().then(res => {
				_this.articleData = _this.articleData.concat(res.records);
				uni.hideNavigationBarLoading();
			});
		}
	},
	methods: {
		searchArticle(val){
			let _this = this;
			_this.setTags(val.value);
			_this.searchForm.value = val.value;
			_this.searchForm.pageNumber = 1;
			_this.getList().then(res => {
				_this.articleData = res.records;
				_this.pages = res.pages;
			});
			_this.showArticle = true;
		},
		tagSearch(val){
			console.log(val);
			let _this = this;
			_this.searchVal = val;
			_this.searchForm.value = val;
			_this.searchForm.pageNumber = 1;
			_this.getList().then(res => {
				_this.articleData = res.records;
				_this.pages = res.pages;
			});
			_this.showArticle = true;
		},
		cancel(){
			this.articleData = [];
			this.showArticle = false;
		},
		setTags(val){
			
			let hisTags = this.hisTags;
			hisTags.unshift(val)
			this.hisTags = Array.from(new Set(hisTags));
			// this.hisTags = Array.from(new Set(hisTags.push(val)));
			uni.setStorageSync("his_tags", this.hisTags);
		},
		getList(){
			let _this = this;
			return new Promise((resovle,reject) => {
				_this.$api.getArticleList(this.searchForm).then(res => {
					// _this.articleData = res.result.records;
					resovle(res.result)
				}).catch(err => {
					reject(err);
				})
			})
			
		},
		clearTags(){
			this.hisTags = [];
			uni.setStorageSync("his_tags", this.hisTags);
		}
	}
}
</script>

<style lang="scss">
	@import url("search.css");
	@import '../index.css';
</style>